<template>
  <header class="app-header">
    <div class="container">
      <div class="header-content">
        <!-- 左侧Logo -->
        <div class="logo">
          <router-link to="/home">
            <h1 class="brand-name">在线教育平台</h1>
          </router-link>
        </div>
        
        <!-- 中间导航菜单 -->
        <nav class="main-nav">
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/home" class="nav-link" :class="{ active: isActive('/home') }">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/course/list" class="nav-link" :class="{ active: isActive('/course/list') }">课程列表</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/user/courses" class="nav-link" :class="{ active: isActive('/user/courses') }" v-if="isLogin">我的课程</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/user/orders" class="nav-link" :class="{ active: isActive('/user/orders') }" v-if="isLogin">我的订单</router-link>
            </li>
          </ul>
        </nav>
        
        <!-- 右侧用户区域 -->
        <div class="user-area">
          <template v-if="isLogin">
            <el-dropdown>
              <span class="user-info">
                <el-avatar size="small" :src="userInfo.avatar || 'https://picsum.photos/100/100?random=1'"></el-avatar>
                <span class="user-name">{{ userInfo.name || userInfo.username }}</span>
                <el-icon class="el-icon--right"><ArrowDown /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <router-link to="/user/profile">个人中心</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <router-link to="/login" class="login-btn">登录</router-link>
            <router-link to="/register" class="register-btn">注册</router-link>
          </template>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 用户信息
const userInfo = reactive({})

// 计算属性：是否登录
const isLogin = computed(() => {
  return !!sessionStorage.getItem('token') && !!sessionStorage.getItem('userInfo')
})

// 检查当前路由是否激活
const isActive = (path) => {
  return route.path === path || route.path.startsWith(path + '/')
}

// 加载用户信息
const loadUserInfo = () => {
  if (isLogin.value) {
    const info = sessionStorage.getItem('userInfo')
    if (info) {
      Object.assign(userInfo, JSON.parse(info))
    }
  }
}

// 处理退出登录
const handleLogout = () => {
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('userInfo')
  ElMessage.success('退出成功')
  router.push('/login')
}

// 页面加载时获取用户信息
onMounted(() => {
  loadUserInfo()
})
</script>

<style scoped>
.app-header {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo .brand-name {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  color: #667eea;
}

.logo a {
  text-decoration: none;
}

.main-nav .nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-left: 30px;
}

.nav-link {
  text-decoration: none;
  color: #303133;
  font-size: 16px;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #667eea;
}

.nav-link.active {
  color: #667eea;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #667eea;
}

.user-area {
  display: flex;
  align-items: center;
}

.login-btn,
.register-btn {
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.login-btn {
  color: #667eea;
  margin-right: 10px;
}

.login-btn:hover {
  background-color: rgba(102, 126, 234, 0.1);
}

.register-btn {
  background-color: #667eea;
  color: white;
}

.register-btn:hover {
  background-color: #5a6fd8;
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.user-name {
  margin: 0 8px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
  }
  
  .nav-list {
    width: 100%;
    justify-content: center;
    margin: 10px 0;
  }
  
  .nav-item {
    margin: 0 15px;
  }
  
  .logo .brand-name {
    font-size: 20px;
  }
}
</style>